<template>
  <div>
    <MyHeader icon="el-icon-s-order" text="确认订单" />
    <div class="confirmOrder">
      <div class="Container">
        <p class="text1">收货地址</p>
        <ul class="nameAddress">
          <li :class="{active:id===0}" @click="changeId(0)">
            <p>陈同学</p>
            <span class="phone">1355555555</span>
            <span class="address">广东 广州市 白云区 江高镇 广东白云学院</span>
          </li>
          <li :class="{active:id===1}" @click="changeId(1)">
            <p>张龙</p>
            <span class="phone">1355555555</span>
            <span class="address"
              >广东 广州市 白云区 江高镇 广东白云学院2号楼</span
            >
          </li>
          <li :class="{active:id===2}" @click="changeId(2)">
            <p>王嘉尔</p>
            <span class="phone">1355555555</span>
            <span class="address"
              >广东 广州市 白云区 江高镇 广东白云学院5号楼</span
            >
          </li>
        </ul>
        <div class="orderBottom">
          <div class="shop">商品及优惠券</div>
          <ul class="nameAddPrice">
            <li
              class="details"
              v-for="(orderItem, index) in orderSettlement"
              :key="index"
            >
              <img :src="orderItem.imgUrl" />
              <span class="pro-name">{{ orderItem.skuName }}</span>
              <span class="pro-price"
                >{{ orderItem.skuPrice }}元x{{ orderItem.skuNum }}</span
              >
              <span class="pro-total"
                >{{ orderItem.skuPrice * orderItem.skuNum }}元</span
              >
            </li>
          </ul>
          <p class="Distribution ">配送方式<i>包邮</i></p>
          <p class="invoice">
            发票
            <i>电子发票</i>
            <i>个人</i>
            <i>商品明细</i>
          </p>
          <ul class="settlement clearfix">
            <li>
              <span>商品件数:</span>
              <i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ orderSettlement.length }}件</i>
            </li>
            <li>
              <span>商品总价:</span>
              <i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ total }}元</i>
            </li>
            <li>
              <span>活动优惠:</span>
              <i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-0元</i>
            </li>
            <li>
              <span>优惠卷抵扣:</span>
              <i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-0元</i>
            </li>
            <li>
              <span>运费:</span>
              <i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0元</i>
            </li>
            <li>
              <span >应付总额:</span>
              <i class="total">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ total }}元</i>
            </li>
          </ul>
          <div class="btn">
            <a class="btnchar" @click="goCartShop">返回购物车</a>
            <a class="btnmoney" @click="goMyIndent">结算</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "confirmOrder",
  data() {
    return {
      orderSettlement: [],
      id:0,
    };
  },
  computed: {
    // 总价格
    total() {
      let sum = 0;
      this.orderSettlement.forEach((item) => {
        sum += item.skuNum * item.skuPrice;
      });
      return sum;
    },
  },
  methods: {
    // 更改id
    changeId(id){
      this.id = id
    },
    // 跳转购物车
    goCartShop() {
      this.$router.push("/shopCart");
    },
    // 跳转我的订单
    goMyIndent() {
      this.$router.push("/myIndent");
      const h = this.$createElement;

      this.$notify({
        title: "温馨提示",
        message: h(
          "i",
          { style: "color: teal" },
          "恭喜你购买成功,但不会收到货"
        ),
        type: "success",
      });
    },
  },
  mounted() {
    let orderSettlement = sessionStorage.getItem("orderSettlement");
    this.orderSettlement = JSON.parse(orderSettlement).data;
  },
};
</script>

<style >
.confirmOrder {
  width: 100%;
  background-color: #eee;
  
}
.Container {
  height: 1000px;
  background-color: #fff;
  position: relative;
  width: 1220px;
  margin: 0 auto;
  padding: 10px;
}
.text1 {
  display: block;
  width: 1220px;
  line-height: 40px;
  height: 40px;
  font-size: 18px;
  color: #333;
  margin: 30px 0 20px 40px;
}
.Container .nameAddress {
  width: 100%;
  height: 220px;
}

.Container .nameAddress li {
  float: left;
  width: 250px;
  height: 180px;
  padding-left: 20px;
  padding-top: 15px;
  margin: -10px 20px 24px 40px;

  border: 1px solid #e0e0e0;
}
.Container .nameAddress .active {
  border: 1px solid #ff6700;
}
.Container ul li p {
  height: 30px;
  font-size: 18px;
  font-weight: 400px;
  line-height: 30px;
  margin-bottom: 10px;
}
.Container ul li .phone {
  display: block;
  font-size: 14px;
  width: 100%;
  color: #757575;
}
.Container ul li .address {
  color: #757575;
  display: block;
  font-size: 14px;
  padding: 10px 0;
  max-width: 180px;
  max-height: 88px;
  line-height: 22px;
}

.shop {
  width: 1140px;
  margin-left: 40px;
  margin-right: 40px;
  color: #333;
  /* width: 100%; */
  height: 40px;
  line-height: 40px;
  font-size: 18px;
  border-bottom: 1px solid #e0e0e0;
}
.nameAddPrice {
   width: 1140px;
   margin-left: 40px;
  margin-right: 40px;
  border-bottom: 1px solid #e0e0e0;
}
.nameAddPrice .details {
  padding: 15px 0;
  height: 30px;
  margin-left: 10px;
  
}
.nameAddPrice .details img {
  height: 30px;
  width: 30px;
  float: left;
  margin-right: 5px;
}
.nameAddPrice .details span {
  font-size: 16px;
  line-height: 30px;
  height: 30px;
  float: left;
}
.nameAddPrice .details .pro-name {
  margin-left: 10px;
  display: inline-block;
  overflow: hidden;
  width: 650px;
}
.nameAddPrice .details .pro-price {
  width: 300px;
  margin-left: 20px;
  /* border-left: #ff6700 2px solid; */
  padding-left: 10px;
}
.nameAddPrice .details .pro-total {
  color: red;
}

.Distribution {
  
  padding: 15px 0;
  width: 1140px;
  margin-left: 40px;
  margin-right: 40px;
  border-bottom: 1px solid #e0e0e0;
  font-size: 18px;
  line-height: 38px;
}
.Distribution i {
  font-size: 14px;
  line-height: 38px;
  color: #ff6700;

  margin-left: 100px;
}
.invoice {
  padding: 15px 0;
  width: 1140px;
  margin-left: 40px;
  margin-right: 40px;
  border-bottom: 1px solid #e0e0e0;
  font-size: 18px;
  line-height: 38px;
}
.invoice i {
  font-size: 14px;
  line-height: 38px;
  /* color: #726963; */
  color: #ff6700;
  margin-left: 120px;
}
.settlement {
 margin-right: -900px;
  float: right;
  height: 200px;
  width: 1140px;
  font-size: 16px;
}
.settlement li {
  margin-right: -920px;
  line-height: 40px;
}
.settlement li .total{
  font-size: 22px;
}
.settlement li span {
  margin-right: 50px;
}
.settlement li i {
   color: #ff6700;

}
.btn {
  float:right;
  
  width: 100%;
  position: absolute;
  top: 850px;
  left: 844px;
}
.btn a {
  /* margin-right: -40px; */

  width: 160px;
  height: 40px;
  background-color: #ff6700;
  display: block;
  float: left;
  text-align: center;
  font-size: 14px;
  line-height: 40px;
  margin-left: 30px;
  color: #fff;
  text-decoration: none;
}
</style>